<template>
  <div>
    <el-form :inline="true" :model="searchForm">
      <el-form-item>
        <el-switch
            v-model="bookPeriodical"
            active-text="图书"
            inactive-text="期刊"
            active-value=0
            inactive-value=1
            @change="getList">
        </el-switch>
      </el-form-item>
      <el-form-item label="查询日期">

        <el-input placeholder="请选择查询日期" type="date" v-model="searchForm.dayTime" clearable @clear="getList"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="select">查询</el-button>
      </el-form-item>
    </el-form>
    <div id="consoleChart" :style="{width: '1100px', height: '700px',margin: '10px auto'}"></div>
    <!--      <div id="bookTopTenChart" :style="{width: '500px', height: '600px'}"></div>-->


  </div>
</template>

<script>
var consoleChart;//全局变量
import elTableInfiniteScroll from 'el-table-infinite-scroll';

export default {
  name: "DailyStatistics",
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  },
  data() {
    return {
      addData: {},
      borrowData: {},
      returnData: {},
      topData: [],
      searchForm: {dayTime: null},
      bookPeriodical: 0,
      consoleOption: {
        title: {
          text: '控制台统计'
        },
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ['product', '今日', '总数'],
            ['进书数量', 0, 0],
            ['借书数量', 0, 0],
            ['还书数量', 0, 0],
          ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        grid: {top: '55%'},
        series: [
          {type: 'bar'},
          {type: 'bar'},
          {
            name: '当日借阅前五名',
            type: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            data: [
              {value: 0, name: '暂无数据1'},
              {value: 0, name: '暂无数据2'},
              {value: 0, name: '暂无数据3'},
              {value: 0, name: '暂无数据4'},
              {value: 0, name: '暂无数据5'}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              normal: {
                color: function (params) {
                  //自定义颜色
                  var colorList = [
                    '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                  ];
                  return colorList[params.dataIndex]
                }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    select() {
      this.getList();
    },
    resetData() {
      this.addData = {};
      this.borrowData = {};
      this.returnData = {};
      this.topData = [];
      this.consoleOption = {
        title: {
          text: '控制台统计'
        },
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ['product', '今日', '总数'],
            ['进书数量', 0, 0],
            ['借书数量', 0, 0],
            ['还书数量', 0, 0],
          ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        grid: {top: '55%'},
        series: [
          {type: 'bar'},
          {type: 'bar'},
          {
            name: '当日借阅前五名',
            type: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            data: [
              {value: 0, name: '暂无数据1'},
              {value: 0, name: '暂无数据2'},
              {value: 0, name: '暂无数据3'},
              {value: 0, name: '暂无数据4'},
              {value: 0, name: '暂无数据5'}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              normal: {
                color: function (params) {
                  //自定义颜色
                  var colorList = [
                    '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                  ];
                  return colorList[params.dataIndex]
                }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    },
    getList() {
      this.resetData()
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$axios.get("/statisticsByDay/add",
          {
            params: {
              addTime: this.searchForm.dayTime,
              bookPeriodical: this.bookPeriodical,
            }
          })
          .then((res) => {
            this.addData = res.data.data;
          });
      this.$axios.get("/statisticsByDay/borrow",
          {
            params: {
              borrowDate: this.searchForm.dayTime,
              bookPeriodical: this.bookPeriodical
            }
          })
          .then((res) => {
            this.borrowData = res.data.data;
          });

      this.$axios.get("/statisticsByDay/return",
          {
            params: {
              returnDate: this.searchForm.dayTime,
              bookPeriodical: this.bookPeriodical
            }
          })
          .then((res) => {
            this.returnData = res.data.data;
          });

      this.$axios.get("/statisticsByDay/getBorrowBookTop",
          {
            params: {
              borrowDate: this.searchForm.dayTime,
              bookPeriodical: this.bookPeriodical,
              size: 5
            }
          })
          .then((res) => {
            this.topData = res.data.data;
            this.drawLine()
          });
      loading.close();

    },
    drawLine() {
      this.consoleOption.dataset.source[1] = ['进书数量', this.addData.daySize, this.addData.total];
      this.consoleOption.dataset.source[2] = ['借书数量', this.borrowData.daySize, this.borrowData.total];
      this.consoleOption.dataset.source[3] = ['还书数量', this.returnData.daySize, this.returnData.total];
      for (let i = 0; i < this.topData.length; i++) {
        let cname = "（" + this.topData[i].cname + "）";
        let name = this.topData[i].name;
        this.consoleOption.series[2].data[i].name = !this.topData[i].cname ? name : name + cname;
        this.consoleOption.series[2].data[i].value = this.topData[i].number;
      }
      if (consoleChart != null && consoleChart !== "" && consoleChart !== undefined) {
        consoleChart.dispose();//销毁
      }
      // 基于准备好的dom，初始化echarts实例
      consoleChart = this.$echarts.init(document.getElementById('consoleChart'))
      consoleChart.clear();

      // 绘制图表
      consoleChart.setOption(this.consoleOption);
    },
  },
  created() {
    this.getList();
  }
}
</script>

<style scoped>

#box {
  width: 500px;
  height: 300px;
  overflow-y: auto;
  margin: 30px 10px;
  border: 1px solid #D3DCE6;
  background-color: #FFF;
  color: #303133;
}

.list {
  padding: 0;
  font-size: 14px;
}

.list-item {
  width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  list-style: none;
  padding: 0 1rem;
  box-sizing: border-box;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e7e7e7;
}

.loading span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #409eff;
  border-left: transparent;
  animation: zhuan 0.5s linear infinite;
  border-radius: 50%;
}

@keyframes zhuan {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
